<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>登录 - 在线打字练习</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        .login-container {
            background: #fff;
            padding: 40px 30px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
            width: 320px;
        }
        h2 {
            text-align: center;
            margin-bottom: 24px;
        }
        input[type="text"], input[type="password"] {
            width: 100%;
            padding: 10px;
            margin-bottom: 18px;
            border: 1px solid #ccc;
            border-radius: 5px;
            font-size: 16px;
        }
        button {
            width: 100%;
            padding: 10px;
            background: #007bff;
            color: #fff;
            border: none;
            border-radius: 5px;
            font-size: 16px;
            cursor: pointer;
        }
        button:hover {
            background: #0056b3;
        }
        .error {
            color: #dc3545;
            text-align: center;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <!-- 登录与注册页面，支持用户登录和注册功能 -->
    <div class="login-container">
        <h2>登录</h2>
        <div id="error-msg" class="error"></div>
        <input type="text" id="username" placeholder="用户名">
        <input type="password" id="password" placeholder="密码">
        <button onclick="login()">登录</button>
        <button onclick="showRegister()" style="margin-top:10px;background:#28a745;">注册</button>
    </div>
    <div class="login-container" id="register-container" style="display:none;">
        <h2>注册</h2>
        <div id="register-error-msg" class="error"></div>
        <input type="text" id="register-username" placeholder="用户名">
        <input type="password" id="register-password" placeholder="密码">
        <button onclick="register()" style="background:#28a745;">注册</button>
        <button onclick="hideRegister()" style="margin-top:10px;">返回登录</button>
    </div>
    <script>
        /**
         * 登录函数，校验用户名和密码
         */
        function login() {
            var username = document.getElementById('username').value;
            var password = document.getElementById('password').value;
            var errorMsg = document.getElementById('error-msg');
            var users = JSON.parse(localStorage.getItem('users') || '{}');
            if (users[username] && users[username] === password) {
                localStorage.setItem('isLoggedIn', 'true');
                localStorage.setItem('currentUser', username);
                window.location.href = 'main.html';
            } else {
                errorMsg.textContent = '用户名或密码错误';
            }
        }
        /**
         * 显示注册界面
         */
        function showRegister() {
            document.querySelector('.login-container').style.display = 'none';
            document.getElementById('register-container').style.display = 'block';
        }
        /**
         * 返回登录界面
         */
        function hideRegister() {
            document.querySelector('.login-container').style.display = 'block';
            document.getElementById('register-container').style.display = 'none';
        }
        /**
         * 注册函数，保存新用户
         */
        function register() {
            var username = document.getElementById('register-username').value;
            var password = document.getElementById('register-password').value;
            var errorMsg = document.getElementById('register-error-msg');
            if (!username || !password) {
                errorMsg.textContent = '用户名和密码不能为空';
                return;
            }
            var users = JSON.parse(localStorage.getItem('users') || '{}');
            if (users[username]) {
                errorMsg.textContent = '用户名已存在';
                return;
            }
            users[username] = password;
            localStorage.setItem('users', JSON.stringify(users));
            localStorage.setItem('isLoggedIn', 'true');
            localStorage.setItem('currentUser', username);
            window.location.href = 'main.html';
        }
        // 已登录自动跳转到主菜单
        if (localStorage.getItem('isLoggedIn')) {
            window.location.href = 'main.html';
        }
    </script>
</body>
</html> 